<template>
  <div
    class="odd-item"
    :class="{
      'odd-item--small': isSmall,
      'odd-item--active': active,
      'odd-item--disabled': disabled,
    }"
    @click="handleClick"
  >
    <template v-if="disabled"> <img src="@/assets/lock.png" class="odd-item__lock" /> </template>
    <template v-else>
      <div class="odd-item__label">{{ label }}</div>
      <div class="odd-item__value">{{ value }}</div>
    </template>
  </div>
</template>
<script setup>
const emits = defineEmits(['click'])
const props = defineProps({
  item: Object,
  label: String,
  value: String | Number,
  size: String,
  active: Boolean,
  disabled: Boolean,
})

const isSmall = computed(() => {
  return props.size === 'small'
})

const handleClick = () => {
  if (props.disabled) return
  emits('click')
}
</script>
<style lang="scss" scoped>
.odd-item {
  flex: 1;
  border-radius: 4px;
  border: solid 1px #ebebeb;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 36px;
  cursor: pointer;
}

.odd-item__lock {
  width: 24px;
  height: 24px;
}
.odd-item__label {
  color: #252a30;
  font-weight: 600;
}

.odd-item__value {
  color: #f83e3e;
  font-weight: 600;
  margin-left: 8px;
}

.odd-item--small {
  // height: 36px;
  // line-height: 36px;
  flex-direction: row;
}

.odd-item--active {
  background-color: #ecf6ff;
}
</style>
